主体|浅色_FlutterNavigationBar优雅的实现底部导航栏菜单

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Flutter NavigationBar 优雅的实现底部导航栏菜单相关的知识，希望对你有一定的参考价值。

程序员如果敲一会就停半天&＃xff0c;抱着一杯茶&＃xff0c;表情拧巴&＃xff0c;那才是在编程&＃xff0c;在之前我要实现一级标签效果&＃xff0c;我还在苦苦写了好多嵌套的代码&＃xff0c;当我看到 Clip 时&＃xff0c;泪奔啊&＃xff0c;原来一个组件就可以实现&＃xff0c;所以从事Flutter开发的小伙伴可以瞅瞅效果&＃xff0c;万一用上呢 。

重要消息

• flutter从入门 到精通 系列文章

本文章实现的效果如下&＃xff1a;

在Flutter开发中NavigationBar 学用来配置底部菜单栏选项。

1 页面的主体是继承于StatefulWidget

StatefulWidget是一个可以更新页面显示样式的Widget&＃xff0c;在Flutter开发中&＃xff0c;如果未使用到状态管理框架如Getx这一类的内容&＃xff0c;那么开发的所有的页面&＃xff0c;只要涉及到页面中有数据更新&＃xff0c;就需要使用StatefulWidget。

class NavaHomePage1 extends StatefulWidget
&＃64;override
State<StatefulWidget> createState()
return _NavaHomePageState();


class _NavaHomePageState extends State<NavaHomePage1>
///当前显示的页面角标
int _currentIndex &＃61; 0;
&＃64;override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("底部导航"),
),
body: Text("这里是body $_currentIndex"),
//底部导航栏
bottomNavigationBar: NavigationBar(
//菜单组
destinations: navigationList,
//当前选中的
selectedIndex:_currentIndex ,
//选择点击事件
onDestinationSelected: (int index)
setState(()
_currentIndex &＃61; index;
);
,
//背景颜色
backgroundColor: Colors.white,
//表面覆盖的一层浅色
surfaceTintColor: Colors.red,
),
);

...



Scaffold 意为脚手架&＃xff0c;在Flutter开发中&＃xff0c;可以理解为页面的结构组件&＃xff0c;一个空的页面&＃xff0c;基本都是以Scaffold来布局。

Scaffold的属性appBar配置的是页面的顶部标题。

Scaffold的属性body配置的是页面中间显示的内容主体&＃xff0c;在本实例中显示的是一个简单的文本&＃xff0c;读者可以替换为对应的具体的实现页页面。

Scaffold的属性bottomNavigationBar配置的就是页面的底部的导航栏菜单&＃xff0c;这里使用了NavigationBar&＃xff0c;NavigationBar中destinations属性用来配置菜单选项&＃xff0c;要求最少有两个子菜单选项&＃xff0c;本实现中定义如下&＃xff1a;

static const List<NavigationDestination> navigationList &＃61; [
NavigationDestination(
tooltip: "",
icon: Icon(Icons.widgets_outlined),
label: "菜单",
selectedIcon: Icon(Icons.widgets),
),
NavigationDestination(
tooltip: "",
icon: Icon(Icons.file_open_outlined),
label: "发现",
selectedIcon: Icon(Icons.file_open),
),
NavigationDestination(
tooltip: "",
icon: Icon(Icons.text_fields),
label: "列表",
selectedIcon: Icon(Icons.text_fields_outlined),
),
NavigationDestination(
tooltip: "",
icon: Icon(Icons.people_alt_outlined),
label: "我的",
selectedIcon: Icon(Icons.people),
)
];


完毕